<template>
  <div class="search-container">
    <a-form-model
      layout="inline"
      :model="searchForm"
      @submit="handleSubmit"
      @submit.native.prevent
    >
      <a-form-model-item label="检索关键字">
        <a-input v-model="searchForm.searchWord" placeholder="请输入关键字">
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="商品类目">
        <a-select
          show-search
          allowClear
          placeholder="请选择商品类目"
          style="width: 200px"
          v-model="searchForm.category"
        >
          <a-select-option v-for="c in categoryList" :key="c.id" :value="c.id">
            {{ c.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">
          <a-icon type="search" />搜索
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import getList from '@/api/category';

export default {
  data() {
    return {
      searchForm: {
        searchWord: '',
        category: '',
      },
      categoryList: [],
    };
  },
  async created() {
    this.categoryList = (await getList()).data;
    this.$emit('submit');
  },
  methods: {
    handleSubmit() {
      this.$emit('submit');
    },
  },
};
</script>

<style lang="less" scoped>
.search-container {
  padding: 15px 30px;
}
</style>
